<template>
<!-- 查询条件 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="商品名称">
      <el-input v-model="formInline.Goods_Name" placeholder="请输入商品名称" clearable />
    </el-form-item>
    <el-form-item label="商品品牌">
      <el-select v-model="formInline.GB_Id" placeholder="请选择" clearable>
        <el-option label="--请选择--" value="" />
        <el-option v-for="item in brandList" :label="item.GB_Name" :value="item.GB_Id" />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="LoadData">查询</el-button>
    </el-form-item>
  </el-form>

    <!-- 显示列表 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="Goods_SnowId" label="商品编号" width="180" align="center" />
      <el-table-column prop="Goods_Name" label="商品名称" width="180" align="center" />
      <el-table-column prop="GB_Name" label="品牌名称" width="180" align="center" />
      <el-table-column prop="GT_Name" label="商品类型名称" width="180" align="center" />
      <el-table-column prop="Goods_Price" label="商品价格" width="180" align="center">
        <template v-slot="scope">
          <span style="color: red;">{{ scope.row.Goods_Price.toFixed(2) }}CNY</span>
        </template>
      </el-table-column>

      <el-table-column prop="Goods_Img" label="商品图片" width="180" align="center">
        <template v-slot="scope">
            <!-- scope.row:获取当前行数据 -->
          <img :src="scope.row.Goods_Img" alt="" style="width: 100px; height: 100px;">
        </template>
      </el-table-column>

      <el-table-column prop="Goods_State" label="状态" width="180" align="center">
        <template v-slot="scope">
          <!-- 作用域插槽 -->
          <el-tag v-if="scope.row.Goods_State==true" type="success">上架</el-tag>
          <el-tag v-else type="danger">下架</el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="Goods_Price" label="操作" width="180" align="center" >
        <template v-slot="scope">
          <el-button type="danger" @click="DeleteInfo(scope.row.Goods_SnowId)">删除</el-button>
          <el-button type="primary" @click="EditInfo(scope.row.Goods_SnowId)">编辑</el-button>
        </template>
      </el-table-column>
      
    </el-table>

    <!-- 分页 -->
    <el-pagination
      v-model:current-page="pageInfo.PageIndex"
      v-model:page-size="pageInfo.PageSize"
      :page-sizes="[1, 2, 3, 4]"
      :size="size"
      :disabled="false"
      :background="false"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.TotalCount"
    />
  </template>
  
  <script lang="ts" setup>
  import { ref,onMounted,reactive,watch } from 'vue'
  import axios from 'axios';
  import type { ComponentSize } from 'element-plus'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import {useRouter} from 'vue-router'

  const router=useRouter();

  const tableData = ref([])


  //创建响应式数据用于完成数据查询
  const formInline = reactive({
    Goods_Name:"",
    GB_Id:""
  })
 
  onMounted(()=>{
    LoadGoodsBrand();
    LoadData();
  })

  //加载数据
  const LoadData=()=>{
    axios.get("https://localhost:44376/api/Goods/ShowGoodsInfo",
      {
        params:{
          Gname:formInline.Goods_Name,
          GBid:formInline.GB_Id,
          PageIndex:pageInfo.value.PageIndex,
          PageSize:pageInfo.value.PageSize
        }
      }
    )
    .then(res=>{
      tableData.value=res.data.Data.PageData;

      //接受后台向前台返回的数据
      pageInfo.value.TotalCount=res.data.Data.TotalCount;
      pageInfo.value.PageCount=res.data.Data.PageCount;
    })
  }

    //创建响应式数据用于接受商品品牌信息
    const brandList = ref([{
        GB_Id:0,
        GB_Name:""
    }]);
  
  //加载商品品牌信息
  const LoadGoodsBrand=()=>{
    axios.get("https://localhost:44376/api/Goods/ShowGoodsBrand")
    .then(res=>{
      console.log(res.data);
      brandList.value=res.data.Data
    })
  }

//创建响应式数据用于保存分页信息
const pageInfo=ref({
  PageIndex:1,
  PageSize:2,
  TotalCount:0,
  PageCount:0
})


const size = ref<ComponentSize>('default')

  //侦听分页数据变化
  watch(pageInfo,()=>{
    LoadData();
  },{deep:true})


  //删除数据
  const DeleteInfo=(SnowId:string)=>{
    ElMessageBox.confirm(
    '确认删除该商品信息吗?',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      axios.put("https://localhost:44376/api/Goods/DeleteGoodsInfo?SnowGoodsId="+SnowId)
      .then(res=>{
        if(res.data.IsSuccess==true)
        {
          ElMessage.success('商品信息删除成功');
          LoadData();
        }
        else
        {
          ElMessage.error('商品信息删除失败');
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Delete canceled',
      })
    })
  }

  //通过路由跳转到修改页面
  const EditInfo=(SnowId:string)=>{
    router.push({
      name:"EditGoods",
      params:{
        Gid:SnowId
      }
    });
  }

  </script>
  

  <style>
    .demo-form-inline .el-input {
      --el-input-width: 220px;
    }

    .demo-form-inline .el-select {
      --el-select-width: 220px;
    }

    .demo-pagination-block + .demo-pagination-block {
      margin-top: 10px;
    }
    .demo-pagination-block .demonstration {
      margin-bottom: 16px;
    }
</style>